<!DOCTYPE html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Declare page as mobile friendly --> 
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0"/>
<!-- Declare page as iDevice WebApp friendly -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- iDevice WebApp Splash Screen, Regular Icon, iPhone, iPad, iPod Retina Icons -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/splash/splash-icon.png"> 
<!-- iPhone 3, 3Gs -->
<link rel="apple-touch-startup-image" href="images/splash/splash-screen.png" 			media="screen and (max-device-width: 320px)" /> 
<!-- iPhone 4 -->
<link rel="apple-touch-startup-image" href="images/splash/splash-screen_402x.png" 		media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" /> 
<!-- iPhone 5 -->
<link rel="apple-touch-startup-image" sizes="640x1096" href="images/splash/splash-screen_403x.png" />

<!-- Page Title -->
<title>触屏版HTML5响应式手机wap网站模板</title>

<!-- Stylesheet Load -->
<link href="styles/style.css"				rel="stylesheet" type="text/css">
<link href="styles/framework-style.css" 	rel="stylesheet" type="text/css">
<link href="styles/framework.css" 			rel="stylesheet" type="text/css">
<link href="styles/bxslider.css"			rel="stylesheet" type="text/css">
<link href="styles/swipebox.css"			rel="stylesheet" type="text/css">
<link href="styles/icons.css"				rel="stylesheet" type="text/css">
<link href="styles/retina.css" 				rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />


<!--Page Scripts Load -->
<script src="scripts/jquery.min.js"		type="text/javascript"></script>	
<script src="scripts/hammer.js"			type="text/javascript"></script>	
<script src="scripts/jquery-ui-min.js"  type="text/javascript"></script>
<script src="scripts/subscribe.js"		type="text/javascript"></script>
<script src="scripts/contact.js"		type="text/javascript"></script>
<script src="scripts/jquery.swipebox.js" type="text/javascript"></script>
<script src="scripts/bxslider.js"		type="text/javascript"></script>
<script src="scripts/colorbox.js"		type="text/javascript"></script>
<script src="scripts/retina.js"			type="text/javascript"></script>
<script src="scripts/custom.js"			type="text/javascript"></script>
<script src="scripts/framework.js"		type="text/javascript"></script>

</head>
<body>

<div id="preloader">
	<div id="status">
    	<p class="center-text">
			Loading the content...
            <em>Loading depends on your connection speed!</em>
        </p>
    </div>
</div>

<div class="header">
    <a class="logo-home" href="index.html"><img src="images/logob.png" alt="img" width="40"></a>
    <div class="header-text">
        <strong>FLATY</strong>
        <em>flat and gorgeous</em>
    </div>
</div>
<div class="header-clear"></div>

<div class="content">
      <div class="container no-bottom">
          <div class="heading">
              <div class="heading-left">
                  <em>lates news and our</em>
                  <h3>BLOG PAGE</h3>
              </div>
              <div class="heading-right">
                  <span class="icon icon-pencil"></span>
              </div>
          </div>
      </div>
      
      <div class="decoration"></div>
      
      <div class="container">
          <div class="blog-post">
              <div class="post-image">
                  <img class="blog-post-image" src="images/blog/001.jpg" alt="img">  
              </div>
              <div class="post-content">
                  <h3>POST TITLE</h3>         
                  <p>
                      Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                      Lorem Ipsum has been the industry's standard text.
    
                  </p>
              </div>
              <div class="post-details">
                  <a class="posted-by" href="#">admin</a>
                  <a class="posted-at" href="#">2 days ago</a>
                  <a class="posted-cat" href="#">HTML5</a>
                  <a class="posted-tag" href="#">frameworks, development</a>
                  <a class="posted-more" href="blog-post.html">Read More</a>
                  <div class="clear"></div>
              </div>
          </div>
      </div>

  
      <div class="decoration"></div>

  
      <div class="container">
          <div class="blog-post">
              <h3>SECOND POST TITLE</h3> 
              <img class="blog-post-image" src="images/blog/1.jpg" alt="img">       
              <p>
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                  Lorem Ipsum has been the industry's standard text.
              </p>
              <div class="post-details">
                  <a class="posted-by" href="#">admin</a>
                  <a class="posted-at" href="#">2 days ago</a>
                  <a class="posted-cat" href="#">HTML5</a>
                  <a class="posted-tag" href="#">frameworks, development</a>
                  <a class="posted-more" href="blog-post.html">Read More</a>
                  <div class="clear"></div>
              </div>
          </div>
      </div> 
      
      <div class="decoration"></div>   
       
      <div class="container">
          <h3>ADVERTISE</h3>
          <p>Want to join the program? Go to <a href="#">this page</a> and sign up today! We'll get back to you!</p>
          <div class="ads">
              <img src="images/ads/tf_125x125_v1.gif" alt="img">
              <img src="images/ads/tf_125x125_v1.gif" alt="img">
              <img src="images/ads/tf_125x125_v1.gif" alt="img">
              <img src="images/ads/tf_125x125_v1.gif" alt="img">
          </div>      
      </div>
   
      <div class="decoration"></div>
      
      <div class="container no-bottom">
          <h3>CATEGORIES</h3>
          <div class="column no-bottom">
              <div class="one-third">
                  <ul class="icon-lists">
                      <li class="list-right">Tutorials</li>
                      <li class="list-right">Premiums</li>
                  </ul>
              </div>
              <div class="one-third">
                  <ul class="icon-lists">
                      <li class="list-right">HTML</li>
                      <li class="list-right">CSS</li> 
                  </ul>         
              </div>
              <div class="one-third">
                  <ul class="icon-lists">
                      <li class="list-right">jQuery</li>
                      <li class="list-right">Mobiles</li> 
                  </ul>         
              </div>
          </div>
      </div>   
  
      <div class="decoration"></div>
  
      <div class="container no-bottom">
          <div class="recent-post">
              <p>
                  <img src="images/blog/001.jpg" width="90" alt="img">
                  <strong>RECENT TITLE ONE</strong><br/>
                  Lorem Ipsum is simply dummy text lorem Ipsum is  text. Lipsmu smipsum doloripsum mipsum! <br/> 
                  <a href="#">Read More</a>
              </p>
          </div>
          <div class="recent-post">
              <p>
                  <img src="images/blog/001.jpg" width="90" alt="img">
                  <strong>RECENT TITLE TWO</strong><br/>
                  Lorem Ipsum is simply dummy text lorem Ipsum is text. Lipsmu smipsum doloripsum mipsum! <br/> 
                  <a href="#">Read More</a>
              </p>
          </div>
      </div>
    
    <div class="decoration"></div>
</div>

<div class="footer">
    <div class="small-navigation-icons">
    	<a href="#" class="small-nav-icon facebook-nav"></a>
        <a href="#" class="small-nav-icon go-up up-nav"></a>
        <a href="#" class="small-nav-icon twitter-nav"></a>
        <div class="clear"></div>
    </div>
    <p class="copyright">COPYRIGHT 2013. ALL RIGHTS RESERVED</p>
</div>



</body>
</html>






























